<template>
  <div class="activity-detail">
    <h1>{{ activity.title }}</h1>
    <div class="activity-info">
      <p><strong>日期:</strong> {{ activity.date }}</p>
      <p><strong>地点:</strong> {{ activity.location }}</p>
      <p><strong>描述:</strong> {{ activity.description }}</p>
    </div>
  </div>
</template>

<script>
import activities from '@/data/activities';

export default {
  props: ['id'],
  data() {
    return {
      activity: {}
    };
  },
  created() {
    this.activity = activities.find(a => a.id === parseInt(this.$route.params.id)) || {};
  }
};
</script>

<style scoped>
.activity-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.activity-info {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
}

.activity-info p {
  margin: 10px 0;
}
</style>